<template>
    <div class="user-credit-report-zmxy">
        <ul class="steps">
            <li class="steps__item active">
                <span>1</span>
                <p>个人信息</p>
            </li>
            <li class="steps__item active">
                <span>2</span>
                <p>芝麻信用</p>
            </li>
            <li class="steps__item">
                <span>3</span>
                <p>运营商</p>
            </li>
            <li class="steps__item">
                <span>4</span>
                <p>京东</p>
            </li>
        </ul>
        <div class="form-wrap">
            <div class="big-title">确认芝麻信用信息</div>
            <ul class="form-box">
                <li class="form__item disabled">
                    <span class="form__key">姓名</span>
                    <div class="form__value">
                        <span class="item"> {{name || placeholder}} </span>
                    </div>
                </li>
                <li class="form__item disabled">
                    <span class="form__key">身份证号码</span>
                    <div class="form__value">
                        <span class="item"> {{idNumber | idNumber}} </span>
                    </div>
                </li>
                <li class="form__item disabled">
                    <span class="form__key">手机号码</span>
                    <div class="form__value">
                        <span class="item"> {{mobile | mobile}} </span>
                    </div>
                </li>
            </ul>
            <!-- <ul class="form-box">
                <li class="form__item">
                    <div class="form__value text-left">
                        <input v-model='smsCode' type="tel" placeholder="请输入验证码">
                    </div>
                    <verification-code v-model='sent' @click='getCode'></verification-code>
                </li>
            </ul> -->
        </div>

        <span class="button long confirm" @click="submitZmxy">提交</span>
        <contact></contact>


        <!-- <modal 
            :show='show_warning'
            :maskClose='false'>
            <div class="modal-bind-card-warning">
                <p>感谢您选择有借，基于风控考虑，在有借进行借款／出借业务的用户，须年满22周岁。为您带来不便，请谅解。</p>
                <div class="modal-bind-card__button"><span @click='show_warning = false'>关闭</span></div>
            </div>
        </modal> -->
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import verificationCode from '../components/VerificationCode.vue'
    import contact from '../components/Contact.vue'
    import idNumber from '../filters/filter-idNumber'
    import mobile from '../filters/filter-mobile'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userCreditReportZmxyValidation } from '../validation/validation'
    import { reportApi, userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            verificationCode,
            contact,
        },
        filters:{
            idNumber,
            mobile
        },
        data() {
            return {
                creditReportNo:this.$route.params.no,
                placeholder:'--',
                name:'',
                idNumber:'',
                mobile:'',
                smsCode:'',
                sent:false,
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // function
            submitZmxy(){
                let params = {
                    creditReportNo:this.creditReportNo,
                    name:this.name,
                    idNumber:this.idNumber,
                    mobile:this.mobile,
                    smsCode:this.smsCode,
                    returnUrl:location.href
                }
                if(!userCreditReportZmxyValidation(params)) return

                this.showLoading()
                reportApi.submitZmxy(params)
                .then(result=>{
                    location.href = result.url
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getCode(){
                this.showLoading()

                userApi.sendSms({
                    mobile:this.mobile,
                    type:'CREDIT_REPORT'
                })
                .then(result=>{
                    this.sent = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.hideLoading()
                })
            },
        },
        created(){
            let status = this.$route.query.status
            if(status == 'fail'){
                this.setMsgTip({
                    text:'芝麻信用授权失败！',
                    type:'error'
                })
                return
            }
            if(status == 'success'){
                this.setMsgTip({
                    text:'芝麻信用授权成功！',
                    type:'success'
                })
                this.$router.push({
                    name:'user-credit-report-operators',
                    params:{
                        no:this.creditReportNo
                    }
                })
                return
            }
            this.name = this.userInfo.user.realName
            this.idNumber = this.userInfo.user.idNumber
            this.mobile = this.userInfo.user.mobile
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-credit-report-zmxy{
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
    }

</style>
